<template>

  <div class="mdui-table-fluid">
    <table class="mdui-table mdui-table-hoverable">
      <thead>
      <tr>
        <th>图片</th>
        <th>id</th>
        <th>商品id</th>
        <th>展示权重</th>
      </tr>
      </thead>
      <tbody>

      <tr v-for="(item) in data" v-on:click="goEdit(item)">
        <td><img :src="get_small_image(item.图片)" width="50px"></td>
        <td>{{item.id}}</td>
        <td>{{item.商品id}}</td>
        <td>{{item.展示权重}}</td>
      </tr>




      </tbody>
    </table>
    <div class="mdui-dialog" id="roll_image_list_dialog">
      <div class="mdui-dialog-title">轮播图编辑</div>
      <div class="mdui-dialog-content">
        <div class="mdui-textfield">
          <label class="mdui-textfield-label">图片</label>
          <br>
          <img :src="this.image_url" width="200px" onclick="document.getElementById('imgup2').click()">
          <input id="imgup2" type="file" @change="up" accept="image/*" name="imgUrls" value="file1" style="visibility: hidden">
        </div>

        <div class="mdui-textfield">
          <label class="mdui-textfield-label">商品id</label>
          <input class="mdui-textfield-input" type="text" v-model="commodity_id"/>
        </div>
        <div class="mdui-textfield">
          <label class="mdui-textfield-label">展示权重</label>
          <input class="mdui-textfield-input" type="text" v-model="weight"/>
        </div>

      </div>
      <div class="mdui-dialog-actions">

        <button class="mdui-btn mdui-ripple" v-on:click="deletee">删除</button>
        <button class="mdui-btn mdui-ripple" v-on:click="update">修改</button>
      </div>

    </div>


  </div>

</template>

<script>
  import * as mdui from "mdui";
  import axios from "axios";
  import qs from "qs";
  import jm from "./../../static/jm"

  const BASE_URL = 'http://127.0.0.1:8886';

  export default {
    name: 'login',
    data () {
      return {
        token: '',
        data:[],
        id:'',
        weight:'',
        commodity_id:'',
        image_id:'',
        image_url:'static/loading.jpg',
        inst:''
      }
    },
    methods:{
      get_image(id){
        return BASE_URL+"/images/big/"+id+".jpg";

      },
      get_small_image(id){
        return BASE_URL+"/images/small/"+id+".jpg";

      },
      goEdit(item){

        this.id=item.id;
        this.commodity_id=item.商品id;
        this.weight=item.展示权重;
        this.image_id=item.图片;
        this.image_url=this.get_image(item.图片);
        console.log(this.image_url);
        this.inst.open();
      },
      up(i){
        let file = i.path[0].files[0];

        let ff = new FormData();
        ff.append("uploadedfile",file);
        this.token=window.localStorage.getItem("token");

        axios.post(BASE_URL+'/images/up',ff,
          {'headers': {'Content-Type': 'multipart/form-data'},
            onUploadProgress: progressEvent => {
              if((progressEvent.loaded / progressEvent.total * 100 | 0) ==100)
                this.image_url='static/loading.jpg';

            }})
          .then(re => {


            this.image_url=re.data.big;
            this.image_id=re.data.id;
          })
          .catch(err=>{
            this.inst.close();
            mdui.default.alert("网络错误");

          });




      },
      update(){
        this.token=window.localStorage.getItem("token");
        axios.post(BASE_URL +'/roll_image/change_roll_image',
          qs.stringify({token:this.token,id:this.id,commodity_id:this.commodity_id,image_url:this.image_id,weight:this.weight}),
          {'headers': {'Content-Type': 'application/x-www-form-urlencoded'}})
          .then(re => {
            if(re.data.状态码===200)
            {



              this.inst.close();
              this.getdata();

            }
            else
            {
              this.inst.close();
              if(re.data.备注==='token无效') {
                this.token = window.localStorage.setItem("token", "");
                this.$router.push("/login");
              }
              else
                mdui.default.alert(re.data.备注);
            }
          })
          .catch(err=>{
            this.inst.close();
            mdui.default.alert("网络错误");

          });
      },
      deletee(){
        this.token=window.localStorage.getItem("token");
        axios.post(BASE_URL +'/roll_image/delete_roll_image',
          qs.stringify({token:this.token,id:this.id}),
          {'headers': {'Content-Type': 'application/x-www-form-urlencoded'}})
          .then(re => {
            if(re.data.状态码===200)
            {



              this.inst.close();
              this.getdata();

            }
            else
            {
              this.inst.close();
              if(re.data.备注==='token无效') {
                this.token = window.localStorage.setItem("token", "");
                this.$router.push("/login");
              }
              else
                mdui.default.alert(re.data.备注);
            }
          })
          .catch(err=>{
            this.inst.close();
            mdui.default.alert("网络错误");

          });
      },
      getdata(){
        this.token=window.localStorage.getItem("token");
        axios.post(BASE_URL +'/roll_image/admin_get_roll_image',
          qs.stringify({token:this.token}),
          {'headers': {'Content-Type': 'application/x-www-form-urlencoded'}})
          .then(re => {
            if(re.data.状态码===200)
            {

              this.data=re.data.列表;

            }
            else
            {
              if(re.data.备注==='token无效') {
                this.token = window.localStorage.setItem("token", "");
                this.$router.push("/login");
              }
              else
                mdui.default.alert(re.data.备注);
            }
          })
          .catch(err=>{
            mdui.default.alert("网络错误");

          });
      }
    },
    mounted() {
      this.token=window.localStorage.getItem("token");
      if(this.token!=null&&this.token.length==64) {
        this.inst = new mdui.default.Dialog('#roll_image_list_dialog');
        this.getdata();
      }
    }
  }
</script>
